<template>
    <div class="m-menu">
        <dl class="nav" @mouseleave="mouseleave">
            <dt>全部分类</dt>
            <dd 
                @mouseenter="enter"
                v-for="(item,key) in menu" 
                :key="key">
                <i :class="item.type"></i>{{ item.name }}<span class="arrow"></span>
            </dd>
        </dl>
        <div class="detail" 
            v-if="kind"
            @mouseenter="sover" 
            @mouseleave="sout">
            <template
                v-for="(item,i) in curdetail.child">
                <h4 :key="i">{{ item.title }}</h4>
                <span 
                    v-for="v in item.child" 
                    :key="v">{{ v }}</span>
            </template>
        </div>
    </div>  
</template>
<script>
export default {
    data() {
        return {
            kind: '',
            menu: [{
                type: 'food',
                name: '美食',
                child: [{
                    title: '美食',
                    child: ['火锅','西餐','代金券','小吃快餐','自助烤肉']
                }]
            },{
                type: 'takeout',
                name: '外卖',
                child: [{
                    title: '外卖',
                    child: ['美团','饿了吗','宅急送']
                }]
            }]
        }
    },
    computed: {
        curdetail: function(){
            return this.menu.filter((item) => item.type === this.kind)[0]
        }
    },
    methods: {
        mouseleave: function(){
            let self = this;
            self.timer = setTimeout(function(){
                self.kind = '';
            },150)
        },
        enter: function(e){
            this.kind = e.target.querySelector('i').className
        },
        sover: function(){
            clearTimeout(this.timer)
        },
        sout: function(){
            this.kind = ''
        }
    }
}
</script>
<style lang="scss">
    
</style>